<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>stuff</title>

    <!-- Bootstrap -->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <!--<script src="js/bootstrap.min.js"></script>-->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }

        div {
            border: 0px solid black;
        }
        .box{
            border: 1px solid gray;
        }
        .top{
            margin-top: 5px;
            height: 30px;
        }
        .inputme{
            width: 100%;
            height: 30px;
            line-height: 1;
        }
        .submit{
            line-height: 1;
            width: 100%;
            height: 30px;
            padding: 10 0;
            margin-left: -20px;

        }
        .inline{
            display: inline-block;
        }
        .line{
            padding-top: 5px;
            padding-bottom: 5px;
        }
        .item2{
            display: inline-block;
            margin-right: 5px;
            line-height: 1;
        }
        .sites2{
            margin-left: 16px;
            vertical-align: center;
        }
        .lab{
            text-align: right;
            line-height: 2;
        }
        .labelr{
            width: 70px;
        }
    </style>
    
</head>
<body>

<div class="container" id="app">

    <form action="/se" name="f">
        <div class="row top">
            <div class="col-xs-6"> <input class="inputme" type="text" name="wd"> </div>
            <div class="col-xs-1"> <input class="submit btn btn-primary" type="submit" value="查询"> </div>
        </div>
        <div v-for="tag in tags" class="sites row">
            <div class="col-xs-1 lab">
                <label>{{tag.desc}}</label>
            </div>
            <div class="line col-xs-6 ">
               <!--  <div v-for="site in tag.sites" class="item"> -->
                    <label v-for="site in tag.sites" class="checkbox-inline labelr">
                        <input type="checkbox" name="sites" v-bind:value="site.value" checked="true">{{site.name}}
                    </label>
                <!-- </div> -->
            </div>
        </div>

    </form>
</div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
              message: 'Hello Vue!',
              tags: [
                {   
                    "tag":"it",
                    "desc":"计算机",
                    "sites":[
                        {"name":"baidu","value":"baidu.com","tag":"it"},
                        {"name":"zhihu","value":"zhihu.com","tag":"it"},
                        {"name":"ibm","value":"ibm.com","tag":"it"},
                        {"name":"jianshu","value":"jianshu.com","tag":"it"},
       
                    ]
                },
                {
                    "tag":"res",
                    "desc":"资源",
                    "sites":[
                        {"name":"link","value":"baidu.com"},
                        {"name":"tor","value":"zhihu.com"},
                    ]
                },
                {
                    "tag":"res",
                    "desc":"资源",
                    "sites":[
                        {"name":"link","value":"baidu.com"},
                        {"name":"tor","value":"zhihu.com"},
                    ]
                },
                {
                    "tag":"res",
                    "desc":"资源",
                    "sites":[
                        {"name":"link","value":"baidu.com"},
                        {"name":"tor","value":"zhihu.com"},
                    ]
                },
                {
                    "tag":"res",
                    "desc":"资源",
                    "sites":[
                        {"name":"link","value":"baidu.com"},
                        {"name":"tor","value":"zhihu.com"},
                    ]
                },
                {
                    "tag":"res",
                    "desc":"资源",
                    "sites":[
                        {"name":"link","value":"baidu.com"},
                        {"name":"tor","value":"zhihu.com"},
                    ]
                }
                ]
            }
        })
    </script>
</body>

</html>